import React, { useRef, useState, useEffect } from 'react';
import { connect } from 'umi';
import PopImgShow from '@/components/PopImgShow';
import TableDataBlock from '@/components/TableDataBlock';
import { collectionPage } from '@/common/contact'
import { PageHeader } from 'antd';
import UserDetail from './components/userDetail';
import { uploadFile } from '@/utils/utils';
const Gather = (props) => {
  const { loading, dispatch, list, visible = {}, onClose } = props;
  const { show, detail = {} ,} = visible
  const [maskVisible, setMaskVisible] = useState(false)
  const { id, title ,oldFlag} = detail
  const [params, setParams] = useState({})
  const childRef = useRef();
  const handleCallback = () => {
    childRef.current.fetchGetData();
  };
  const extraBtn = [
    {
      text: '导出',
      onClick: () => {
        dispatch({
          type: 'liveStreaming/fakeExportUserInformationCollection',
          payload: {
            ...params,
            informationCollectionId: id
          },
          callback: (e) => {
            const { url } = e
            uploadFile(url)
          }
        })
      },
    },
  ];
  const searchItems = [
    {
      label: '姓名',
      name: 'username',
    },
    {
      label: '手机',
      name: 'mobile',
    },
    {
      label: '创建时间',
      type: 'rangePicker',
      name: 'startTime',
      end: 'endTime',
    },
  ];
  const getColumns = [
    {
      title: '商品名称',
      dataIndex: 'goodsName',
    },
    {
      title: '姓名',
      dataIndex: 'username',
    },
    {
      title: '头像',
      dataIndex: 'profile',
      render: (e) => {
        return <PopImgShow url={e}></PopImgShow>
      }
    },
    {
      title: '标题',
      dataIndex: 'title',
    },
    {
      title: '描述',
      dataIndex: 'description',
    },
    {
      title: '采集时间',
      dataIndex: 'createTime',
    },
    {
      title: '采集页面',
      dataIndex: 'informationCollectionPage',
      render: (e) => {
        return collectionPage[e]
      }
    },
    {
      title: '邀请人姓名',
      dataIndex: 'shareName',
    },
    {
      title: '邀请人类型',
      dataIndex: 'shareType',
      render: (e) => {
        return {
          user: '用户',
          admin: '员工'
        }[e]
      }
    },
    {
      title: '邀请时间',
      dataIndex: 'shareTime',
    },
    {
      title: '手机',
      dataIndex: 'mobile',
    },
       {
      title: '阶段',
      dataIndex: 'stageInfo',
      render: (e = {}) => {
        const { stageName } = e
        return stageName || '--'
      }
    },
    {
      type: 'handle',
      width: 200,
      dataIndex: 'id',
      render: (val, record) => [
        {
          title: '查看',
          click: () => {
            setMaskVisible({ show: true, detail: record })
          }
        },
      ],
    },
  ];
  return (
    <>
      <PageHeader
        style={{ border: '1px solid rgb(235, 237, 240)', marginBottom: 24, background: '#ffffff' }}
        className="site-page-header"
        onBack={() => onClose()}
        title={'返回列表'}
        subTitle={`${title}采集信息`}
      />
      <TableDataBlock
        cRef={childRef}
        params={{
          informationCollectionId: id
        }}
        btnExtra={extraBtn}
        loading={loading}
        searchItems={searchItems}
        searchCallback={(e) => { setParams(e) }}
        columns={getColumns}
        rowKey={(record) => `${record.id}`}
        dispatchType="liveStreaming/fetchUserInformationCollection"
        {...list}
      ></TableDataBlock>
      <UserDetail oldFlag={oldFlag} visible={maskVisible} onClose={() => setMaskVisible(false)}></UserDetail>
    </>
  );
};

export default connect(({ liveStreaming, loading }) => ({
  list: liveStreaming.userInformationCollectionList,
  loading: loading.models.liveStreaming,
}))(Gather);
